<template>
	<view class="bgcolor" style="position: relative;">
		<header-top :messageInfo="{typeFlag:true,message:'提现'}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content">
					<view class="top_right_text" @click="jumpurl('/pages/mypage/withdrawaldetail/withdrawaldetail')">
						提现明细</view>
				</view>
			</view>
		</header-top>
		<view class="zhanghu">
			<view class="flexbetween" style="padding: 40rpx 0rpx;border-bottom: 2rpx solid #F6F6F6;" @click="khh=true">
				<text style="width: 20%;font-weight: 800;">提现至</text>
				<text style="width: 50%;text-align: left;">{{openBack}}</text>
				<u-icon name='arrow-right'></u-icon>
			</view>
			<!-- 开户行 -->
			<u-picker :show="khh" keyName="bank_name" :columns="khhcolumns" @confirm="khhconfirm" @cancel="khh = false" title="提现至"></u-picker>
				<view class="flexbetween" style="padding: 40rpx 0rpx;">
					<text style="width: 20%;font-weight: 800;">账户类型</text>
					<text style="width: 50%;text-align: left;">{{type}}</text>
					<u-icon name='arrow-right' style='visibility: hidden;'></u-icon>
				</view>
		</view>
		<view class="zhanghu">
			<view class="flexbetween" style="padding: 40rpx 0rpx;">
				<text style="font-weight: 800;">输入提现金额</text>
			</view>
			<view class="flexbetween" style="padding: 40rpx 0rpx;">
				<view class="flexbetween"> <text style="margin-right: 20rpx;font-weight: 800;font-size: 36rpx;">￥ </text>
				<!-- <input type="number" placeholder="请输入提现金额" v-model="price"> -->
					<u--input placeholder="请输入提现金额" border="none" type='number' clearable v-model="price" fontSize="18px"></u--input>
				</view>
				<text style="color: #3476fe;font-weight: 800;" @click="allwithdraw">全部提现</text>
			</view>
		</view>
		<view style="padding: 0 70rpx;position: absolute;left: 0;bottom: 30rpx; width: 100%;box-sizing: border-box;">
			<view class="buttonStyle flexcenter" @click="tixianbtn">提现</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				openBack:"",//选择的银行
				type:"对公",//类型
				cardnum:"",
				khhid: "",//选择的银行id
				khh: false,
				khhcolumns: [],
				mymoney:"",
				price:""//提现金额
			}
		},
		onLoad() {
			this.getbank()
		},
		computed:{
			// splitnum(){
			// 	 return  this.cardnum.substring((this.cardnum.length-4),this.cardnum.length)
			// }
		},
		methods: {
			// 获取银行信息
			getbank(){
				let _this = this
				httpRequest.request('appapi/staff/user/tixianlist', 'POST', {
				}).then(res => {
					res.data.list.forEach(item=>{
						item.bank_name = item.bank_name + "（"+item.cardnum.substring((item.cardnum.length-4),item.cardnum.length)+"）"
					})
					console.log(res.data.list)
					let aa = []
					aa.push(res.data.list)
					_this.khhcolumns = aa
					_this.openBack = aa[0][0].bank_name
					_this.khhid = aa[0][0].id
					_this.mymoney = res.data.money
				})
			},
			// 提现至确认
			khhconfirm(e){
				this.openBack = e.value[0].bank_name
				this.khhid = e.value[0].id
				this.type = e.value[0].type
				this.cardnum = e.value[0].cardnum
				this.khh = false
			},
			// 全部提现
			allwithdraw(){
				this.price = this.mymoney
			},
			tixianbtn(){
				if(this.price==""){
					httpRequest.toast("请输入提现金额")
					return false
				}
				if(this.price<0){
					httpRequest.toast("请输入正确的提现金额")
					return false
				}
				if(this.mymoney<this.price){
					httpRequest.toast("提现金额不得大于剩余金额")
					return false
				}
				let _this = this
				httpRequest.request('appapi/staff/user/tixian', 'POST', {
					money:this.price,
					card:this.khhid
				}).then(res => {
					if(res.code==1){
						httpRequest.toast(res.msg)
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
						}, 1000)
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
			jumpurl(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.zhanghu {
		width: 100%;
		padding: 30rpx;
		background-color: #fff;
		margin: 30rpx 0;
		box-sizing: border-box;
	}
</style>
